<template>
    <el-dialog width="600px"
               title="编辑车辆信息"
               :visible.sync="innerVisible"
               append-to-body>
        <el-form label-width="80px" size="small">
            <el-row>
                <el-col :span="12">
                    <el-form-item label="车牌">
                        <div class="flex">
                            <remote-dict-select v-model="detailData.plate_color"
                                                :name.sync="detailData.plate_color_name"
                                                :clearable="false"
                                                dict="plate_color"
                                                style="margin-right: 5px;" />
                            <el-input v-model="detailData.plate_no"
                                      maxlength="8" placeholder="车牌号" />
                        </div>
                    </el-form-item>
                </el-col>
            </el-row>

            <div class="tablecontent">
                <table>
                    <thead>
                        <tr>
                            <th width="25%">总重(吨)</th>
                            <th width="25%">限重(吨)</th>
                            <th width="25%">超重(吨)</th>
                            <th width="25%">超限率</th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr>
                            <td>{{ detailData.vehicle_weight }}</td>
                            <td>{{ detailData.limit_weight }}</td>
                            <td>{{ detailData.over_weight }}</td>
                            <td>{{ detailData.over_rate }}%</td>
                        </tr>
                    </tbody>
                </table>
                <table>
                    <thead>
                        <tr>
                            <th width="25%">车长</th>
                            <th width="25%">车宽</th>
                            <th width="25%">车高</th>
                            <th width="25%" />
                        </tr>
                    </thead>
                    <tbody>
                        <tr class="noborder">
                            <td>{{ detailData.vehicle_len }}</td>
                            <td>{{ detailData.vehicle_width }}</td>
                            <td>{{ detailData.vehicle_heigth }}</td>
                            <td />
                        </tr>
                    </tbody>
                </table>
            </div>

            <el-row>
                <el-col :span="12">
                    <el-form-item label="检测站点">
                        {{
                            detailData.name
                        }}
                    </el-form-item>
                </el-col>
                <el-col :span="12">
                    <el-form-item label="过车时间">
                        {{
                            moment(detailData.pass_time).format('YYYY-MM-DD HH:mm:ss')
                        }}
                    </el-form-item>
                </el-col>
            </el-row>
            <el-row>
                <el-col :span="12">
                    <el-form-item label="车道">
                        {{
                            detailData.lane_no
                        }}
                    </el-form-item>
                </el-col>
                <el-col :span="12">
                    <el-form-item label="方向">
                        {{
                            detailData.directionName
                        }}
                    </el-form-item>
                </el-col>
            </el-row>

            <el-row>
                <el-col :span="12">
                    <el-form-item label="车身颜色">
                        <remote-dict-select v-model="detailData.vehicle_color"
                                            :name.sync="detailData.vehicle_color_name"
                                            :clearable="false"
                                            dict="vehicle_color" />
                    </el-form-item>
                </el-col>
                <el-col :span="12">
                    <el-form-item label="车辆类型">
                        <remote-dict-select v-model="detailData.vehicle_type"
                                            :name.sync="detailData.vehicleTypeName"
                                            :clearable="false"
                                            dict="vehicle_type" />
                    </el-form-item>
                </el-col>
            </el-row>
            <el-row>
                <el-col :span="12">
                    <el-form-item label="车辆轴数">
                        <el-select v-model="detailData.axle_num"
                                   placeholder="请选择">
                            <el-option
                                v-for="item in 6"
                                :key="item"
                                :label="item"
                                :value="item" />
                        </el-select>
                    </el-form-item>
                </el-col>
                <el-col :span="12">
                    <el-form-item label="行驶速度">
                        <div class="flex">
                            <el-input-number v-model="detailData.vehicle_speed"
                                             class="flex-sub margin-right-xs"
                                             placeholder="速度" />
                            <span>km/h</span>
                        </div>
                    </el-form-item>
                </el-col>
            </el-row>
        </el-form>
        <!--        三轴27 四轴36-->
        <div slot="footer" class="dialog-footer">
            <el-button size="small" @click="innerVisible = false">
                取 消
            </el-button>
            <el-button size="small" :loading="isLoading" type="primary"
                       @click="handlerSubmit">
                确 定
            </el-button>
        </div>
    </el-dialog>
</template>

<script>
import moment from 'moment';
// import RemoteDictSelect from '@/modules/components/DictSelect/RemoteDictSelect';
// import {EditIllegalVehicleInfo} from '@/api/informationApi';

export default {
    name: 'VehicleEdit',
    components: {
        // RemoteDictSelect
    },
    props: {
        initData: Object
    },
    data() {
        return {
            innerVisible: false,
            isLoading: false,
            detailData: {},
            initDataRef: null
        };
    },
    computed: {},
    watch: {
        initData: {
            handler() {

            },
            immediate: true
        }
    },
    mounted() {
        console.log('============');
        console.log(this.initData);
    },
    methods: {
        moment,
        show() {
            this.detailData = {...this.initData};
            this.initDataRef = this.initData;
            this.innerVisible = true;
        },
        handlerSubmit() {
            if (this.clickTooFast()) return;
            this.isLoading = true;
            let postdata = {
                Pass_id: this.detailData.pass_id,
                Plate_no: this.detailData.plate_no,
                Plate_color: this.detailData.plate_color,
                Vehicle_color: this.detailData.vehicle_color,
                Vehicle_type: this.detailData.vehicle_type,
                Axle_num: this.detailData.axle_num,
                Vehicle_speed: this.detailData.vehicle_speed,
                Violative_alarm_id: this.detailData.violative_alarm_id
            };
            EditIllegalVehicleInfo(postdata).then(res => {
                this.isLoading = false;
                console.log(res);
                this.$message({
                    message: '恭喜，保存成功',
                    type: 'success'
                });
                this.innerVisible = false;
                // 更新列表中的数据，这样再次点击编辑会传入正确的值
                this.initDataRef.plate_no = this.detailData.plate_no;
                this.initDataRef.plate_color = this.detailData.plate_color;
                this.initDataRef.vehicle_color = this.detailData.vehicle_color;
                this.initDataRef.vehicle_type = this.detailData.vehicle_type;
                this.initDataRef.axle_num = this.detailData.axle_num;
                this.initDataRef.vehicle_speed = this.detailData.vehicle_speed;
                this.initDataRef.plate_color_name = this.detailData.plate_color_name;
                this.initDataRef.vehicle_color_name = this.detailData.vehicle_color_name;
                this.initDataRef.vehicleTypeName = this.detailData.vehicleTypeName;
                this.initDataRef.limit_weight = res.res.limit_weight;
                this.initDataRef.over_weight = res.res.over_weight;
                this.initDataRef.over_rate = res.res.over_rate;
                this.$emit('getParentList');
            }).catch(err => {
                this.isLoading = false;
                console.log(err);
            });
        }
    }
};
</script>
<style scoped>

/deep/
.el-form-item {
    margin-bottom: 5px !important;
}
</style>
